<template>
  <div class="container">
    <div id="main" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { onMounted, onUnmounted } from 'vue';

export default {
  name: 'Banshi',
  setup() {
    let myChart = null;

    onMounted(() => {
      // 确保 DOM 已经挂载后再初始化图表
      const chartDom = document.getElementById('main');
      if (chartDom) {
        myChart = echarts.init(chartDom);
        
        const option = {
          backgroundColor: '#0f2035',
          title: {
            text: '办事群众人员归属地占比',
            left: 'center',
            top: '5%',
            textStyle: {
              color: '#fff',
              fontSize: 16,
              fontWeight: 'bold'
            },
            show: true // 显示标题
          },
          tooltip: {
            show: false // 隐藏提示框
          },
          legend: {
            show: false // 隐藏图例
          },
          series: [
            {
              name: '办事业务分类',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false // 隐藏标签
              },
              emphasis: {
                label: {
                  show: false // 隐藏强调时的标签
                }
              },
              labelLine: {
                show: false // 隐藏标签线
              },
              data: [
                { value: 1048, name: '企业注册', itemStyle: { color: '#00b96b' } },
                { value: 735, name: '税务办理', itemStyle: { color: '#ffcc00' } },
                { value: 580, name: '社保申请', itemStyle: { color: '#38bdf8' } },
                { value: 484, name: '许可证办理', itemStyle: { color: '#ff6b6b' } },
                { value: 300, name: '其他业务', itemStyle: { color: '#9966ff' } }
              ]
            }
          ]
        };

        myChart.setOption(option);
        
        // 添加窗口大小调整事件
        window.addEventListener('resize', () => {
          if (myChart) {
            myChart.resize();
          }
        });
      }
    });

    onUnmounted(() => {
      // 组件销毁时释放资源
      if (myChart) {
        myChart.dispose();
      }
    });

    return {
      // 如有需要可返回数据
    };
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}

#main {
  width: 100%;
  height: 100%;
}
</style>